<template>
  <div class="box">
    <header class="header">
      <van-nav-bar title="小懒猪记账">
        <span slot="left">
          <img src="../../lib/img/home/TYAssistant@2x.png" alt="" style="height: .18rem;wodth: .21rem;">
        </span>
        <template #right>
          <img src="../../lib/img/home/search@2x.png" alt="" style="height: .18rem;wodth: .21rem;">
        </template>
      </van-nav-bar>
      <div style="height: .62rem;background:#FDD949;">
        <div style="height:.22rem;font-size: .09rem;color:#af9737;">
          <van-row>
            <van-col span="4">{{ year }}年</van-col>
            <van-col span="10">收入</van-col>
            <van-col span="10">支出</van-col>
          </van-row>
        </div>
        <div style="height:.40rem;">
          <van-row>
            <van-col span="4" style="font-size:.10rem">
              <span style="font-size:.25rem;color:#70622c;">0{{ month }}</span> 月
            </van-col>
            <van-col span="10" style="font-size: .12rem;">
              <span style="font-size: .25rem;color:#70622c;">{{ totalincome }}</span>.00
            </van-col>
            <van-col span="10" style="font-size: .12rem;">
              <span style="font-size: .25rem;color:#70622c;">{{ totalexpenditure }}</span>.00
            </van-col>
          </van-row>
        </div>
      </div>
    </header>
    <div class="content">
      <div v-for="(item, index) of billList" :key="index">
        <!-- 账单时间标题 -->
        <van-row class="title">
          <van-col span="14">{{ item.time }}</van-col>
          <van-col span="10" style="padding: 0 .12rem;">
            <span style="float: left;">
              收入: {{ item.income }}
            </span>
            <span style="float: right;">
              支出: {{ item.expenditure }}
            </span>
          </van-col>
        </van-row>
        <!-- 显示详细账单明细 -->
        <div class="detailed" v-for="(itm, idex) in item.detailedlist" :key="idex" style="display: flex;">
          <div class="img">
            <img :src=itm.url alt="" style="height: .33rem;width: .33rem">
          </div>
          <div class="tit">
            <div>{{ itm.remarks }}</div>
            <div>{{ itm.money }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 直接导入axios请求其他接口数据
import axios from 'axios'
// 01.安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
// import Vue from 'vue'
// import { Button } from 'vant'
// Vue.use(Button)
// 02.引入 Mand Mobile 组件并使用,直接看API https://didi.github.io/mand-mobile/#/zh-CN/docs/started
// import { ActionBar, Toast } from 'mand-mobile'
// Vue.component(ActionBar.name, ActionBar)
// 03.v-charts组件库已经在main.js中全部引入了直接查看API CV即可  https://v-charts.js.org/#/props-demo1
import Vue from 'vue'
import { NavBar, Icon, Col, Row } from 'vant'
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Col)
Vue.use(Row)
export default {
  // 设置data初始值
  data () {
    return {
      year: '', // 年
      month: '', // 月
      day: '', // 日
      totalincome: 0, // 总收入
      totalexpenditure: 0, // 总支出
      // temporarylist: [], // 存放账单的临时数组
      billList: [
        // {
        //   time: '2020/05/27',
        //   income: '250', // 收入
        //   expenditure: '120', // 支出
        //   detailedlist: [ // 详细账单
        //     {
        //       url: 'https://s1.ax1x.com/2020/05/06/YVUCQA.png',
        //       remarks: '孩子',
        //       money: '500'
        //     },
        //     {
        //       url: 'https://s1.ax1x.com/2020/05/06/YVUCQA.png',
        //       remarks: '孩子',
        //       money: '500'
        //     },
        //     {
        //       url: 'https://s1.ax1x.com/2020/05/06/YVUCQA.png',
        //       remarks: '孩子',
        //       money: '500'
        //     }
        //   ]
        // }
      ]
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {
    axios({
      method: 'post',
      url: 'http://60.205.153.211:3000/api/lazyBookkeeping/QueryBookkeeping',
      data: {
        userid: localStorage.getItem('lazypiguserid')
      }
    }).then((res) => {
      // console.log(res.data.data)
      // 年
      this.year = res.data.data[0].timer.split('/')[0] * 1
      // 月
      this.month = res.data.data[0].timer.split('/')[1] * 1
      // 获取出来以后根据时间来进行划分
      // 双层循环,对其中每个元素都进行比较分类
      const temporarylist = [] // 存放临时数据
      res.data.data.map((item, index) => {
        // 每一次内层循环结束后都是分好一次类别的数,所以需要将账单收支总计以及每一个时间下的账单详细清零重计
        let TotalRevenue = 0 // 收入总计
        let TotalExpenditure = 0 // 支出总计
        const detailedlist = [] // 存放相应的同一时间下的对象类型的账单
        res.data.data.map((itm, idx) => {
          // 判断外层循环中的timer是否与内层是否相等然后进行分类统计
          if (item.timer === itm.timer) {
            // 支出收入计算
            if (itm.bill * 1 > 0) {
              TotalRevenue += itm.bill * 1
              // console.log('收入', TotalRevenue)
            } else {
              TotalExpenditure += itm.bill * 1
              // console.log('支出', TotalRevenue)
            }
            // 编译账单详情
            const objbill = {
              url: itm.icon, // 图标
              remarks: itm.remark, // 备注
              money: itm.bill * 1// 账单
            }
            // console.log('money', objbill.money)
            // 然后放进数组中
            detailedlist.push(objbill)
            // console.log('detailedlist', detailedlist)
            // 而后在继续编译时间分类下的账单详情
            const obj = {
              day: itm.timer.split('/')[2] * 1, // 从时间例如2020/05/20中取出最后一个代表天的数,然后可以用用这个对数组进行去重还有排序的操作
              time: itm.timer,
              income: TotalRevenue, // 收入
              expenditure: TotalExpenditure, // 支出
              detailedlist
            }
            // 最后完成之后编译进临时总数组中
            temporarylist.push(obj)
            // this.billList.push(obj)
          }
        })
      })
      // console.log('temporarylist', temporarylist)
      // 我们通过观察最后结果发现会有很多数据不完整的重复元素,我们可以通过计算纯收入与重新计算后的流水和时候相等来剔除掉不对的数据
      // let num = 0
      const arr = [] // 存放剔除错误数据的数组
      temporarylist.map((item, index) => {
        // console.log('次数', num += 1)
        let flowingWater = 0
        item.detailedlist.map((itm, index) => {
          // console.log(item.detailedlist)
          // console.log('流水', itm.money)
          flowingWater += itm.money
        })
        // console.log('数据收支和', item.income * 1 + item.expenditure * 1)
        // console.log('数据流水和', flowingWater)
        if (item.income * 1 + item.expenditure * 1 === flowingWater) {
          // console.log('数据一样则将本数据保存到总数组中')
          arr.push(item)
        }
      })
      // 数组去重
      this.billList.push(arr[0])
      // console.log(this.billList)
      for (let i = 0; i < arr.length; i++) {
        const item = arr[i]
        // for (let j = i; j < arr.length; j++) {
        //   const itm = arr[j]
        //   if (item.day === itm.day) {
        //   }
        // }
        // 判断一下在数组this.billList中是否存在当前元素
        const isflag = this.billList.some((itm, idx, arr) => {
          return itm.day === item.day
        })
        if (isflag === false) {
          this.billList.push(item)
        }
      }
      // console.log(arr)
      // 总收入
      this.billList.map((itm, idx) => {
        this.totalincome += itm.income
      })
      // 总支出
      this.billList.map((itm, idx) => {
        this.totalexpenditure += itm.expenditure
      })
    })
  },
  // 计算属性
  methods: {}
}
</script>

<style lang="scss" scoped>
// 样式
  // nav-bar导航栏
  /deep/ .van-nav-bar {
    height: .6rem;
    line-height: 0.6rem;
    text-align: center;
    background-color: #FDD949;
    user-select: none;
    // 通知栏左侧箭头
    /deep/ .van-icon-arrow-left {
      color: black;
      font-size: .20rem;
    }
    // 通知栏标题line-
    /deep/ .van-nav-bar__title {
      font-size: .16rem;
    }
  }
  // 内容区域
  .content {
    // 账单时间标题
    .title {
      line-height: .25rem;
      font-size: .12rem;
      /deep/ .van-col {
        height: .25rem;
      }
    }
    // 显示详细账单明细
    .detailed {
      line-height: .55rem;
      font-size: .16rem;
      display: flex;
      .img {
        width: 10%;
      }
      .tit {
        width: 90%;
        padding: 0 0.10rem;
        display: flex;
        justify-content: space-between;
      }
    }
  }
</style>
